/* eslint-disable new-cap */
<!--
 * @Author: 小花
 * @Date: 2022-04-23 11:12:13
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-19 17:55:53
 * @FilePath: /adminClient/src/components/ViewWorkerRegState.vue
 * @Description:
-->
<template>
  <el-drawer v-model="drawerVisible" direction="btt" size="85%">
    <template #title>
      <h4>查看维修员注册状态</h4>
    </template>
    <template #default>
      <div class="downCode">
        <el-button @click="downWorkerCodeToExcel">下载所有</el-button>
        <el-button @click="execPullNewWorkerRegState" type="primary">刷新</el-button>
      </div>
      <el-divider />
      <el-table :data="workerRegStateList" stripe style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="workerName" label="姓名" />
        <el-table-column prop="workerPhone" label="电话" />
        <el-table-column prop="workerEmail" label="邮箱" />
        <el-table-column prop="openid" label="邀请码">
          <template #default="scope">
            <el-tag class="ml-2" type="success" style="box-sizeing: border-box">
              {{scope.row.openid}} </el-tag>
            <i class="fa fa-clone" aria-hidden="true" title="Copy"
              @click="copyTagCode(scope.row.openid, $event)">复制</i>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
    </template>
  </el-drawer>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue'
import ViewWorkerRegStateData from '@/model/main/layout/dynamicNav/WorkerPage//ViewWorkerRegState'
import { pullNewWorkerRegState } from '@/plugins/request/http'
import { responseEnum, responseUtil } from '@/plugins/request/responseUtil'
import { IWorker } from '@/model/main/layout/dynamicNav/WorkerPage'
import useClipboard from 'vue-clipboard3'
import { exportXlsx } from '@/plugins/xlsx/xlsx'
import { ElMessage } from 'element-plus'
import _cloneDeep from 'lodash/cloneDeep'
import nProgress from 'nprogress'

export default defineComponent({
  name: 'viewWorkerRegState',
  setup () {
    const coreData = reactive(new ViewWorkerRegStateData())

    const execPullNewWorkerRegState = async () => {
      nProgress.start()
      const result = await (await pullNewWorkerRegState()).data as responseUtil<string[]>
      if (result.code === responseEnum.OK) {
        coreData.workerRegStateList.length = 0
        result.data.forEach(item => {
          coreData.workerRegStateList.push(JSON.parse(item) as IWorker)
        })
      } else if (result.code === responseEnum.FAIL) {
        coreData.workerRegStateList.length = 0
        ElMessage.info(result.msg)
      }
      nProgress.done()
    }
    execPullNewWorkerRegState()

    const copyTagCode = (code: string, ev: Event) => {
      useClipboard().toClipboard(code).then((val: any) => {
        ElMessage.success(`邀请码 ${val.text} 已复制到剪贴板`);
        (ev.target as HTMLElement).classList.replace('fa-clone', 'fa-check');
        (ev.target as HTMLElement).style.color = '#67c23a'
      })
    }

    const downWorkerCodeToExcel = async () => {
      const print: IWorker[] = _cloneDeep(coreData.workerRegStateList)
      const target: IWorker = {
        workerName: '姓名',
        workerPhone: '电话',
        workerEmail: '邮箱',
        openid: '邀请码'
      }
      await exportXlsx(print, '维修员注册邀请码', { replaceTitle: target, header: Object.values(target) })
    }

    return {
      ...toRefs(coreData),
      downWorkerCodeToExcel,
      copyTagCode,
      execPullNewWorkerRegState
    }
  }
})
</script>

<style lang='scss' scoped>
.el-drawer {
  .downCode {
    text-align: right;
  }
  .el-tag {
    width: 80px;
    letter-spacing: 2px;
    box-sizing: border-box;
  }
  i {
    margin-left: 1rem;
    cursor: pointer;
    user-select: none;
    &:active {
      color: #409eff;
    }
  }
}
</style>
